<!--
 * @Author: your name
 * @Date: 2020-09-08 16:44:12
 * @LastEditTime: 2020-09-08 21:57:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \www_admin_masterd:\vue项目\BRSS-web-project\components\Minimap\index.vue
-->
<template>
  <div id="navigator">
    <div class="pannel-title">导航器</div>
    <div 
      id="minimap" 
      ref="minimap" 
      class="minimap"/>
  </div>
</template>

<script>
import Minimap from '@antv/g6/build/minimap'
import eventBus from '@/utils/eventBus'
export default {
  data() {
    return {
      minimap: null,
      graph: null
    }
  },
  created() {
    this.bindEvent()
  },
  mounted() {
    this.$nextTick(() => {
      this.initMinmap()
    })
  },
  methods: {
    initMinmap() {
      const cfgs = {
        container: 'minimap'
      }
      this.minimap = new Minimap({ ...cfgs })
    },
    bindEvent() {
      eventBus.$on('afterAddPage', page => {
        this.graph = page.graph
        this.bindPage()
      })
    },
    bindPage() {
      if (!this.minimap || !this.graph) {
        return
      }
      this.graph.addPlugin(this.minimap)
    }
  }
}
</script>

<style scoped>
#navigator {
  width: 200px;
  /* height: 176px; */
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 3;
}

.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: #ebeef2;
  color: #000;
  line-height: 28px;
  padding-left: 12px;
}
</style>
